<template>
  <el-row>
    <el-col :span="20"/>
    <el-col :span="2">
      <el-button @click="RedirectToRecalledWordsPage">查看已背单词</el-button>
    </el-col>
  </el-row>
  <el-row/>
  <el-row/>
  <el-row/>
  <el-row>
    <el-col :span="6"/>
    <el-col :span="10">
      <el-card v-if="isRecalled == false">
        <template #header>{{ current_word.word }}</template>
        <el-text>{{ current_word.ipa }}</el-text><br>
        <el-button @click="CheckExplication(0)">点击查看释义</el-button>
        <template #footer>
          <el-row>
          <el-col :span="3">
            <el-button @click="CheckExplication(100)">我绝对认识</el-button>
          </el-col>
          <el-col :span="4"/>
          <el-col :span="3">
            <el-button @click="CheckExplication(80)">有点认识</el-button>
          </el-col>
          <el-col :span="4"/>
          <el-col :span="3">
            <el-button @click="CheckExplication(50)">有印象</el-button>
          </el-col>
          <el-col :span="4"/>
          <el-col :span="3">
            <el-button @click="CheckExplication(30)">不懂</el-button>
          </el-col>
          </el-row>
        </template>
      </el-card>
      <el-card v-if="isRecalled == true">
        <template #header>{{ current_word.word }}</template>
        <el-text>{{ current_word.ipa }}</el-text><br>
        <el-text>{{ explication }}</el-text>
        <template #footer>
          <el-row>
          <el-col :span="3">
            <el-button @click="SwitchToNextWord">仍然认识</el-button>
          </el-col>
          <el-col :span="4"/>
          <el-col :span="3">
            <el-button @click="SwitchToNextWord">猜对了</el-button>
          </el-col>
          <el-col :span="4"/>
          <el-col :span="3">
            <el-button @click="SwitchToNextWord">猜错了</el-button>
          </el-col>
          <el-col :span="4"/>
          <el-col :span="3">
            <el-button @click="SwitchToNextWord">不懂</el-button>
          </el-col>
          </el-row>
        </template>
      </el-card>
    </el-col>
  </el-row>
  <el-row>

    <el-col :span="0"/>
    <el-col :span="4">
      <el-button @click="GetUserInfo">获取用户信息</el-button>
    </el-col>
    <el-col :span="10">
      <el-text>{{ test_info_1 }}</el-text>
    </el-col>

  </el-row>
  <el-row>

    <el-col :span="0"/>
    <el-col :span="4">
      <el-button @click="GetRecallWord">获取单词列表</el-button>
    </el-col>
    <el-col :span="10">
      <el-text>{{ test_info_2 }}</el-text>
    </el-col>

  </el-row>

  <el-row/>
  <el-row/>
  <el-row>
    <el-col :span="20"/>
    <el-col :span="2">
      <el-button @click="RedirectToMainPage">返回主页</el-button>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
// --------------------引入包--------------------
import {onMounted, ref}from 'vue'
import { useRouter } from 'vue-router'
import {TxGetUserConfig, TxGetWordList} from './RecallWordPageInterface'
import type {UserConfigResponseData, WordListResponseData} from './RecallWordPageInterface'
// --------------------全局变量--------------------
let userConfig: UserConfigResponseData;
let wordList: WordListResponseData[] = [];
// --------------------初始化代码--------------------
const router = useRouter();
onMounted(() => {
  GetRecallWord();
  GetUserInfo();
});
// --------------------实时交互代码--------------------

const current_word = ref(
  {
    tempId:'0',
    word:'abandon',
    ipa:'[əˈbændən]',
    explication:'vt. 放弃(信念);(不顾责任、义务等)离弃，遗弃，抛弃;(不得已而)舍弃，丢弃，离开;停止(支持或帮助);中止;陷入，沉湎于（某种情感; \n n. 放任;放纵;',
    proficiency:0,
    data:'2023-10-01',
    userid:'123456'
  },
)

const explication = ref('')
const isRecalled = ref(false)

function CheckExplication(proficiency:number) {
  explication.value = current_word.value.explication+' 熟练度:'+proficiency;
  isRecalled.value = true;

  AddProficiency(proficiency);
  TxRecalledWord();
}

function SwitchToNextWord(){
  isRecalled.value = false;
}

function RedirectToMainPage(){
  router.push('main');
}

function RedirectToRecalledWordsPage() {
  router.push('recalled');
}


// -----------------------------------业务逻辑代码-----------------------------------
function AddProficiency(proficiency:number){
  current_word.value.proficiency = proficiency;
}

async function GetUserInfo(){
  const userId = '12345';  // 例如用户的 ID
  userConfig = await TxGetUserConfig(userId);  // 使用 await 获取异步结果
  test_info_1.value = "用户id:"+userConfig.userId+" 新记单词数量:"+userConfig.newWordNumber+" 复习单词数量:"+userConfig.recallWordNumber;
}

async function GetRecallWord(){
  if(!userConfig){
    return;
  }
  wordList = await TxGetWordList(userConfig);
  test_info_2.value = wordList[0].spell+wordList[0].ipa;

}

/**
 * 每背完一个单词, 就传送给后端保存
 */
function TxRecalledWord() {
  // 待办
}

// -----------------------------------测试代码-----------------------------------
// 测试代码
const test_word = ref({
  word:'abandon',
  ipa:'[əˈbændən]',
  explication:'vt. 放弃(信念);(不顾责任、义务等)离弃，遗弃，抛弃;(不得已而)舍弃，丢弃，离开;停止(支持或帮助);中止;陷入，沉湎于（某种情感; \n n. 放任;放纵;',
  proficiency:0,
  data:'2023-10-01',
  userid:'123456',
  isRecalled:false
})

const test_wordList =
  [
    {
      tempId:'0',
      word:'abandon',
      ipa:'[əˈbændən]',
      explication:'vt. 放弃(信念);(不顾责任、义务等)离弃，遗弃，抛弃;(不得已而)舍弃，丢弃，离开;停止(支持或帮助);中止;陷入，沉湎于（某种情感; \n n. 放任;放纵;',
      proficiency:0,
      data:'2023-10-01',
      userid:'123456'
    },
    {
      tempId:'0',
      word:'abandon',
      ipa:'[əˈbændən]',
      explication:'vt. 放弃(信念);(不顾责任、义务等)离弃，遗弃，抛弃;(不得已而)舍弃，丢弃，离开;停止(支持或帮助);中止;陷入，沉湎于（某种情感; \n n. 放任;放纵;',
      proficiency:0,
      data:'2023-10-01',
      userid:'123456'
    }
  ]

const test_info_1 = ref("")
const test_info_2 = ref("")

function Test_CheckExplication(proficiency:number){
  explication.value = test_word.value.explication+' 熟练度:'+proficiency;
  isRecalled.value = true;
}
</script>
